/* eslint-disable object-curly-spacing */
import React, { FC, useRef, useEffect } from 'react';
import * as echarts from 'echarts';
import china from './china.json';
import { renderToString } from 'react-dom/server';

const EchartsMap: FC = () => {
  const main = useRef(null);

  useEffect(() => {
    createMap();
  }, []);

  const createMap = () => {
    if (!main.current) return;
    const charts = echarts.init(main.current);

    echarts.registerMap('china', china);

    const option: any = {
      // 背景色
      backgroundColor: 'rgb(121,145,200)',
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const element = renderToString(
            <div>
              <span dangerouslySetInnerHTML={{ __html: params.marker }}></span>
              <span>{params.name}</span>
              <div>{params.value || '暂无数据'} </div>
            </div>
          );

          return element;
        },
      },

      geo: {
        // 地理坐标系组件
        map: 'china', // 注册的地图名称
        roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
        zoom: 1.2, // 当前视角的缩放比例
        label: {
          // 图形上的文本标签（显示地图省份）
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
          formatter: ({ name }) => {
            return name
              .replaceAll('省', '')
              .replaceAll('自治区', '')
              .replaceAll('特别行政区', '')
              .replaceAll('市', '')
              .replaceAll('维吾尔', '')
              .replaceAll('回族', '')
              .replace('壮族', '');
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)', // 图形的描边颜
          },
          emphasis: {
            areaColor: '#F3B329',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },

      // 左下角颜色色块
      visualMap: {
        min: 800,
        max: 5000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered'],
        },
      },

      series: [
        {
          name: '最小风险指数', // 系列名称
          type: 'map', // 图表类型
          geoIndex: 0,
          itemStyle: {
            // 图形样式
            normal: { label: { show: true } }, // 默认状态下地图的文字
            emphasis: { label: { show: true } }, // 鼠标放到地图上面显示文字
          },
          data: [
            { name: '北京市', value: 1 },
            { name: '天津市', value: 2000 },
          ],
        },
      ],
    };
    charts.setOption(option);
    window.addEventListener('resize', function () {
      charts.resize();
    });
  };

  return <div ref={main} style={{ width: '100%', height: 800 }}></div>;
};

export default EchartsMap;
